<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
	</head>
	<body>
		<div class="content">
			<div class="logo">
				<input type="checkbox" id="check" />全选
			</div>
			<div class="cartList" id="cartList">
				<ul>
					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
				</ul>
				<ul class="u">

					<li><input type="checkbox" id="c" /><img src="images/dog.jpg"></li>
					<li>我和狗狗活下来了</li>
					<li>¥<input type="text" name="price" value="21.90"></li>
					<li><input type="button" name="minus" value="-" onclick="subtract(this)"><input type="text"
							name="amount" value="1"><input type="button" name="plus" value="+" onclick="incBook(this)">
					</li>
					<li id="price">¥21.90</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del(this)">删除</p>
					</li>
				</ul>

				<ul class="u">
					<li><input type="checkbox" id="c" /><img src="images/mai.jpg"></li>
					<li>灰霾来了怎么办</li>
					<li>¥<input type="text" name="price" value="24.00"></li>
					<li><input type="button" name="minus" value="-" onclick="subtract(this)"><input type="text"
							name="amount" value="1"><input type="button" name="plus" value="+" onclick="incBook(this)">
					</li>
					<li id="price">¥24.00</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del(this)">删除</p>
					</li>
				</ul>

				<ol>
					<li id="totalPrice">商品总计：<span></span></li>
					<li><span onclick="pay()">结 算</span></li>
				</ol>
			</div>
		</div>
	</body>
	<script>
		function incBook(t) {
			var num = t.previousElementSibling.value++;
			num++;
			console.log(num);

			var a = t.parentNode.previousElementSibling.lastChild.value;
			console.log("价格", a);
			t.parentNode.nextElementSibling.innerHTML = "￥" + (a * num).toFixed(2);
		}

		function subtract(t) {
			var num = t.nextElementSibling.value;
			if (num <= 0) {
				del(t);
			} else {
				t.nextElementSibling.value--;
				num--;
				console.log(num);

				var a = t.parentNode.previousElementSibling.lastChild.value;
				console.log("价格", a);
				t.parentNode.nextElementSibling.innerHTML = "￥" + (a * num).toFixed(2);
			}
		}

		function pay() {
			var price = document.getElementsByName("price");
			var amount = document.getElementsByName("amount");
			var resl = 0;
			for (let i = 0; i < price.length; i++) {
				resl += parseFloat(price[i].value) * parseInt(amount[i].value);
			}

			document.querySelector("#totalPrice span").innerHTML = resl;
		}

		function closewin() {
			close();
		}

		function collection() {
			alert("收藏成功");
		}

		function del(t) {
			if (confirm("是否确认删除"))
				self(t);
			alert("删除成功");
		}

		function self(t) {
			let y = t.parentNode.parentNode.parentNode;
			let b = t.parentNode.parentNode;
			y.removeChild(b);
		}
		
		// document.getElementById("check").checked=false;
		document.querySelector("#check").onclick = function() {
			let checked = document.querySelector("#check").checked;
			let checkson = document.querySelectorAll("#c");
			if (checked) {
				for (let i = 0; i < checkson.length; i++) {
					checkson[i].checked = true;
				}
			} else {
				for (let i = 0; i < checkson.length; i++) {
					checkson[i].checked = false;
				}
			}

		}
		
		let checkson = document.querySelectorAll("#c");
		for(let i = 0; i < checkson.length; i++){
			checkson[i].onclick=function() {
				let t=0;
				let f=0;
				for (let i = 0; i < checkson.length; i++) {
					if(checkson[i].checked == true){
						t++;
					}else{
						f++;
					}
				}
				if(t==checkson.length){
					document.querySelector("#check").checked=true;
				}else{
					document.querySelector("#check").checked=false;
				}
			}
		}
		
	</script>
</html>
